<template>
  <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
    非VIP用户只能选择三个标签项及最多三个标签
  </van-notice-bar>
  <van-divider
    :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
  >
    选择标签
  </van-divider>
  <van-tree-select
    v-model:active-id="activeIds"
    v-model:main-active-index="activeIndex"
    :items="tagList"
    max="3"
  />
  <div style="padding: 12px">
    <van-button block type="primary" @click="doEditTags">确认</van-button>
  </div>
  <van-divider
    :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
  >
    已选标签
  </van-divider>
  <van-row gutter="16" style="padding: 0 16px">
    <van-col v-for="tag in activeIds">
      <van-tag
        closeable
        size="large"
        color="#7232dd"
        plain
        type="primary"
        @close="doClose(tag)"
      >
        {{ tag }}
      </van-tag>
    </van-col>
  </van-row>
</template>

<script setup lang="ts">
import myAxios from "../plugins/myAxios";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showFailToast, showSuccessToast } from "vant";
import { setCurrentUserState } from "../states/user";

const originTagList = [
  {
    text: "身份",
    children: [
      { text: "大学生", id: "大学生" },
      { text: "打工人", id: "打工人" },
      { text: "成功人士", id: "成功人士" },
      { text: "纯鹿人", id: "纯鹿人" },
      { text: "小黑子", id: "小黑子" },
      { text: "ikun", id: "ikun" },
      { text: "程序员", id: "程序员" },
    ],
  },
  {
    text: "爱好",
    children: [
      { text: "唱", id: "唱" },
      { text: "跳", id: "跳" },
      { text: "Rap", id: "Rap" },
      { text: "篮球", id: "篮球" },
      { text: "Music", id: "Music" },
      { text: "乒乓球", id: "乒乓球" },
      { text: "拍照", id: "拍照" },
      { text: "看电影", id: "看电影" },
      { text: "跑步", id: "跑步" },
      { text: "编程", id: "编程" },
      { text: "打游戏", id: "打游戏" },
      { text: "旅游", id: "旅游" },
    ],
  },
  {
    text: "状态",
    children: [
      { text: "求学", id: "求学" },
      { text: "求职", id: "求职" },
      { text: "在职", id: "在职" },
      { text: "离职", id: "离职" },
      { text: "流浪", id: "流浪" },
      { text: "充满阳光", id: "充满阳光" },
      { text: "焦虑", id: "焦虑" },
      { text: "内卷", id: "内卷" },
    ],
  },
  {
    text: "开通VIP可解锁更多标签项",
    disabled: true,
  },
  {
    text: "开通VIP可解锁更多标签项",
    disabled: true,
  },
  {
    text: "开通VIP可解锁更多标签项",
    disabled: true,
  },
  {
    text: "开通VIP可解锁更多标签项",
    disabled: true,
  },
  {
    text: "开通VIP可解锁更多标签项",
    disabled: true,
  },
];

let tagList = ref(originTagList); // 标签列表
const activeIndex = ref(0); //选中的标签组

// 移除标签
const activeIds = ref([]); //选中的标签
const doClose = (tag: any) => {
  activeIds.value = activeIds.value.filter((item) => {
    return item !== tag;
  });
};

const router = useRouter();
const route = useRoute();
const doEditTags = async () => {
  const id = route.query.id;
  const str = activeIds.value.join("-");
  const res = await myAxios.post("/user/update", {
    id: id,
    tags: str,
  });
  if (res.code === 0) {
    setCurrentUserState(null);
    showSuccessToast("小智暖心提醒:标签修改成功");
    router.back();
  } else {
    showFailToast(`小智遗憾告知:${res.message}`);
  }
};
</script>
